<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>容器环境管理</el-breadcrumb-item>
      <el-breadcrumb-item>环境清理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple" style="line-height: 30px">
          <el-button type="primary" style="width: 100%" @click="dialogVisible = true">容器清理</el-button>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="line-height: 30px">
          <el-button type="primary" style="width: 100%" @click="dialogVisible = true">待添加功能</el-button>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="line-height: 30px">
          <el-button type="primary" style="width: 100%" @click="dialogVisible = true">待添加功能</el-button>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="line-height: 30px">
          <el-button type="primary" style="width: 100%" @click="dialogVisible = true">待添加功能</el-button>
        </div></el-col>
      </el-row>

      <el-dialog
        title= "单个TAG下所有容器及数据清理"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="运行环境:">
            <el-input v-model="formLabelAlign.containerEnv"></el-input>
          </el-form-item>
          <el-form-item label="容器TAG:">
            <el-input v-model="formLabelAlign.containerTag"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" v-on:click="delContainerSubmit" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        labelPosition: 'left',
        formLabelAlign: {
          containerEnv: '',
          containerTag: ''
        },
        dialogVisible: false
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      },
      delContainerSubmit() {
        axios.delete(`${this.cmdbUrl}/delContainerOnTag/${this.formLabelAlign.containerTag}/${this.formLabelAlign.containerEnv}`).then((res) => {
          if (res.status === 200) {
            location.reload()
          }
        })
      }
    }
}
</script>
<style scoped>

  .box-card {
    width: 100%;
    margin-top: 10px;
    height: 100%;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
